<template>
  <div class="goods">
    <ul>
      <li v-for="g in goods" :key="g.id" style="width: 20%;float:left;">
        <div class="goods-list">
          <div class="list-body">
            <a @click="toproduct(g.id)">
              <img class="picture" :src="g.attributeValue0">
            </a>
            <strong>
              ￥{{g.price}}
              <del>￥{{g.marketPrice}}</del>
            </strong>
            <a @click="toproduct(g.id)">
              <h5 class="text-overflow" :title="g.name">{{ g.name }}</h5>
              <h6 class="text-overflow text-orange" :title="g.note">{{ g.note }} &nbsp;</h6>
            </a>
            <!-- <p class="text-center">
              <router-link to="/store" :title="getstorename(g.storeId)" >{{ getstorename(g.storeId) }}</router-link>
              <span v-show="true" class="text-icon">自营</span>
            </p> -->
          </div>
          <!-- <div class="list-footer">
            <a href="#" class="add-product">
              <i class="iconfont el-icon-shopping-cart-2"></i>
              加入购物车
            </a>
            <a class="add-product" href="#" title="收藏">
              <i class="iconfont el-icon-star-off"></i>
            </a>
            <a class="add-product" href="#" title="详情">
              <i class="iconfont el-icon-chat-dot-square"></i>
            </a>
          </div> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  // import {storeinfo} from "@/api/storemodule";
  // import {ref} from "vue";
  import router from '@/router'

  export default {
    name: "Goods",
    props:['goods'],
    setup(){
      // let storeinfos = ref({})
      // function getstorename(storeId){//查询店铺信息
      //   storeinfo(storeId).then(res =>{
      //     storeinfos.value = res.data.data
      //   })
      //   return storeinfos.value.name
      // }
      function toproduct(id){
        sessionStorage.setItem('id',id)
        router.push({path:'/product'})
      }
      return {
        // getstorename,
        toproduct
      }
    }
  }
</script>

<style scoped>
  *{
    color: #666;
    font-size: 13px;
  }
  a{
    text-decoration: none;
  }
  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .text-orange{
    color: #f78e3d;
  }
  .goods{
    width: 100%;
    margin: 10px auto;
  }
  .goods-list{
    line-height: 25px;
    padding: 10px 10px 0 10px;
    margin-top: 15px;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
    border: 1px solid #eeeeee;
  }
  .goods-list:hover{
    border-color: #409EFF;
    box-shadow: 0 2px 12px 0 rgba(64, 159, 255, 0.3)
  }
  .goods-list:hover .list-footer a,.goods-list:hover .list-footer a i{
    color: #409EFF;
  }
  .list-body{
    width: 187px;
    padding: 10px 0;
    margin: auto;
    border-bottom: 1px #f8f8f8 solid;
  }
  .list-body a h5:hover{
    color: #409EFF;
  }
  .picture{
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .list-body strong{
    color: #f04134;
  }
  .list-body strong del{
    color: #bfbfbf;
    font-weight: normal;
  }
  .text-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
    font-weight: normal;
    margin: 0;
  }
  .text-center{
    text-align: center;
    margin: 0;
  }
  .text-center a:hover{
    color: #409EFF;
  }
  .text-icon{
    margin-left: 10px;
    background-color: #409EFF;
    display: inline;
    padding: 1px 6px 2px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
  }

  .list-footer{
    padding: 10px 0;
    position: relative;
    left: 10px;
    right: 10px;
    margin: 0 auto;
  }
  .add-product{
    padding: 0 10px;
    transition: color 0.3s;
  }
  .add-product:not(:last-child){
    border-right: 1px #eeeeee solid;
  }
</style>